<template>
	<view class="">
		<view class="management">
			<view class="left">
				<image src="../../../static/tupian89.png" mode="widthFix"> </image>
				<text>{{parent_folder}}</text>
			</view>
			<view class="right">
				<image src="../../../static/tupian97.png" mode="widthFix"> </image>
				<text>{{management_file}}</text>
			</view>
		</view>
		<view class="education">
			<view class="per_file" v-for="(item,index) in education_list" :key="index">
				<image :src="item.url" mode="widthFix" class="left"></image>
				<view class="center">
					<view class="">
						{{item.text}}
					</view>
					<view class="">
						<text>{{item.start_date}}</text>
						<text>{{item.time}}</text>
						<text>{{item.afternoon}}</text>
					</view>
				</view>
				<view class="right">
					<view class="">
						{{item.teacher}}
					</view>
					<view class="">
						{{item.share}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parent_folder: '发送给家长文件',
				management_file: '分班管理文件',
				education_list: [{
						url: '../../static/tupian99.png',
						text: '教学文件',
						teacher: '王老师，李老师...',
						start_date: '2019.04.03',
						time: '17:29',
						afternoon: '3.4M',
						share: "取消共享",
					},
					{
						url: '../../static/tupian98.png',
						text: '教学文件',
						teacher: '',
						start_date: '2019.04.03',
						time: '17:29',
						afternoon: '3.4M',
						share: "",
					},
					{
						url: '../../static/tupian99.png',
						text: 'Set-up.exe',
						teacher: '',
						start_date: '2019.04.03',
						time: '17:29',
						afternoon: '3.4M',
						share: "",
					},
					{
						url: '../../static/tupian98.png',
						text: 'Set-up.exe',
						teacher: '',
						start_date: '2019.04.03',
						time: '17:29',
						afternoon: '3.4M',
						share: "",
					},
					{
						url: '../../static/tupian99.png',
						text: '教学文件',
						teacher: '',
						start_date: '2019.04.03',
						time: '17:29',
						afternoon: '3.4M',
						share: "",
					},
					{
						url: '../../static/tupian98.png',
						text: '教学文件',
						teacher: '',
						start_date: '2019.04.03',
						time: '17:29',
						afternoon: '3.4M',
						share: "",
					},
					{
						url: '../../static/tupian99.png',
						text: 'Set-up.exe',
						teacher: '',
						start_date: '2019.04.03',
						time: '17:29',
						afternoon: '3.4M',
						share: "",
					},
					{
						url: '../../static/tupian98.png',
						text: 'Set-up.exe',
						teacher: '',
						start_date: '2019.04.03',
						time: '17:29',
						afternoon: '3.4M',
						share: "",
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.management {
		width: 100%;
		height: 76rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.left {
			width: 250rpx;
			display: flex;
			margin-left: 80rpx;
			justify-content: flex-start;
			align-items: center;

			image {
				&:nth-child(1) {
					width: 35rpx;
				}
			}

			text {
				&:nth-child(2) {
					color: #333333;
					margin-left: 30rpx;
					font-size: 26rpx;
				}
			}
		}

		.right {
			width: 250rpx;
			margin-left: 80rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			image {
				&:nth-child(1) {
					width: 35rpx;
				}
			}

			text {
				&:nth-child(2) {
					color: #333333;
					margin-left: 30rpx;
					font-size: 26rpx;
				}
			}
		}

	}

	.education {
		width: 710rpx;
		margin-left: 20rpx;

		.per_file {
			width: 100%;
			border-bottom: 1rpx solid #F2F2F2;
			height: 126rpx;
			display: flex;
			justify-content: flex-start;

			.left {
				width: 43rpx;
				margin-top: 29rpx;
				margin-left: 10rpx;
			}

			.center {
				width: 300rpx;
				margin-left: 26rpx;
				margin-top: 29rpx;
				height: 80rpx;


				view {
					&:nth-child(1) {
						width: 100%;
						color: #333333;
						font-size: 28rpx;
					}

					&:nth-child(2) {
						margin-top: 8rpx;
						width: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						text {
							color: #999999;
							font-size: 20rpx;

							&:nth-child(1) {}

							&:nth-child(2) {
								margin-left: 15rpx;
							}

							&:nth-child(3) {
								margin-left: 35rpx;
							}
						}

					}
				}

			}

			.right {
				width: 250rpx;
				margin-left: 75rpx;
				margin-top: 29rpx;
				height: 80rpx;

				view {
					&:nth-child(1) {
						width: 100%;
						color: #333333;
						font-size: 24rpx;
					}

					&:nth-child(2) {
						margin-top: 21rpx;
						width: 100%;
						text-indent: 4em;
						color: #b9b9b9;
						font-size: 20rpx;
					}
				}
			}
		}

	}
</style>
